<template>
  <div class="review-work-table-container">
    <BaseDialog :config="dialogConfig" :callback="dialogCallback">
      <!-- <div class="header-title">{{table_name}}</div>
            <div class="header-desc">{{remark}}</div> -->
      <BaseTable
        :tableQuery.sync="tableQuery"
        :config="tableConfig"
        :callback="tableCallBack"
      />
    </BaseDialog>
  </div>
</template>

<script>
import BaseDialog from '@/views/report/Components/Dialog/index'
import BaseTable from '@/views/report/Components/Table/table'
import ReviewTableHeader from './reviewTableHeader'
import * as workTable from '@/api/report/workTable'
const defaultPage = {
  limit: 10,
  current_page: 1
}

export default {
  data() {
    return {
      tableQuery: {},

      dialogConfig: {
        title: '',
        show: true,
        width: '90%',
        size: 'big',
        hideBtns: true
      },

      tableConfig: {
        style: {
          //height: 300
        },
        options: {},
        list: [],
        columns: [],
        tips: {
          show: false
        },
        operationBtns: {},
        pagination: {
          show: true,
          total: 0
        }
      },
      table_name: '',
      remark: ''
    }
  },
  props: ['work_table_id'],
  created() {
    Object.assign(
      this.tableQuery,
      {
        work_table_id: this.work_table_id
      },
      defaultPage
    )
    this.getReview()
  },
  mounted() {},
  computed: {},
  watch: {},
  components: {
    BaseDialog,
    BaseTable
  },
  methods: {
    close() {
      this.$emit('close')
    },

    dialogCallback(action, done) {
      if (action === 'Confirm') {
        console.log('Confirm')
      } else {
        this.close()
      }
    },

    tableCallBack(action) {
      if (action === 'SizeChange') {
        this.getReview()
      }
      if (action === 'CurrentChange') {
        this.getReview()
      }
    },

    // 获取table title 动态组件承载表头
    getColumns(table_columns) {
      let columns = []
      for (let i = 0; i < table_columns.length; i++) {
        let row = table_columns[i]
        columns.push({
          component: ReviewTableHeader,
          prop: row.name,
          label: row.new_name,
          column_desc: row.column_desc,
          value_type: row.value_type
        })
      }
      console.log(columns)
      return columns
    },

    getReview() {
      workTable
        .preview(this.tableQuery)
        .then(({ data }) => {
          let {
            table_columns = [],
            list = [],
            total,
            table_name,
            remark,
            alias
          } = data || {}
          this.table_name = table_name
          this.remark = remark
          Object.assign(this.dialogConfig, {
            title: `${alias} ${table_name}`
          })
          Object.assign(this.tableConfig, {
            columns: this.getColumns(table_columns),
            list: list
          })
          this.tableConfig.pagination.total = total
        })
        .catch(error => {
          this.$message.error(error)
        })
    }
  }
}
</script>

<style lang="scss"></style>
